﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<script type="text/javascript" type="text/javascript" src="scripts/drag.js"></script>
<script type="text/javascript" src="{site.Dir}_data/SysConfig.js"></script>
<script type="text/javascript" src="{site.Dir}_libs/jquery-min.js"></script>
<script type="text/javascript" src="{site.Dir}scripts/jumbotcms.js?v4"></script>
<link type="text/css" rel="stylesheet" href="{site.Dir}style/global.css" />
<title>形象裁剪</title>
    <style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;

}
form {
	margin: 0px;
}
-->
</style>
<script type="text/javascript">
function ajaxChangeAvatar(info)
{
	JumbotCms.Loading.show("正在处理,请等待...");
	$.ajax({
		type:		"get",
		dataType:	"json",
		data:		"info="+info+"&time="+(new Date().getTime()),
		url:		"ajax.aspx?oper=changeavatar",
		error:		function(XmlHttpRequest,textStatus, errorThrown){JumbotCms.Loading.hide();alert(XmlHttpRequest.responseText); },
		success:	function(d){
			switch (d.result)
			{
			case '0':
				JumbotCms.Alert(d.returnval, "0");
				break;
			case '1':
				parent.window.location.reload();
				break;
			}
		}
	});
}
</script>
</head>
<body>
<form name="changeavatar" id="changeavatar" action="" method="post" onsubmit="return getcutpos();">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div id="form_preview">
	<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:none;"><tr><td height="22" align="center"><span id="info_cut"></span></td></tr></table>
	<div id="cut_div" style="border:0px solid #888888; width:344px; height:284px; overflow: hidden; position:relative; top:0px; left:0px; margin:3px; cursor:pointer;"><table style="border-collapse: collapse; z-index: 10; filter: alpha(opacity=75); position: relative; left: 0px; top: 0px; width: 344px;  height: 284px; opacity: 0.75;" cellspacing="0" cellpadding="0" border="0" unselectable="on"><tr><td style="background: #cccccc; height: 82px;" colspan="3"></td></tr><tr><td style="background: #cccccc; width: 112px;"></td><td style="border: 1px solid #ffffff; width: 120px; height: 120px;"></td><td style="background: #cccccc; width: 112px;"></td></tr><tr><td style="background: #cccccc; height: 82px;" colspan="3"></td></tr></table><img id="cut_img" border="0" style="position:relative; top:-344px; left:0px" src="{site.Dir}plus/image.aspx?url={$Session_User_Avatar}" alt="" /></div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>&nbsp;&nbsp;</td><td><img style="margin-top: 5px; cursor:pointer;"  src="images/l_m.gif" alt="最合适" onmouseover="this.src='images/h_m.gif'" onmouseout="this.src='images/l_m.gif'" onclick="imageResize('m')" /></td><td><img style="margin-top: 5px; cursor:pointer;" src="images/l_n.gif" alt="实际大小"  onmouseover="this.src='images/h_n.gif'" onmouseout="this.src='images/l_n.gif'" onclick="imageResize('n')" /></td><td><img style="margin-top: 5px; cursor:pointer;"  src="images/l_-.gif" alt="图片缩小" onmouseover="this.src='images/h_-.gif'" onmouseout="this.src='images/l_-.gif'" onclick="imageResize('-')" /></td><td><img style="margin-top: 5px; cursor:pointer;" src="images/l_+.gif" alt="图片放大"  onmouseover="this.src='images/l_+.gif'" onmouseout="this.src='images/l_+.gif'" onclick="imageResize('+')" /></td><td><input type="submit" class="button" id="submit" value="确认裁剪并保存" /></td></tr></table>
	<input type="hidden" name="action" id="action" value="cutsave" />
	<input type="hidden" name="cut_pos" id="cut_pos" value="" />
</div>
</td></tr></table>
</form>
<script type="text/javascript" type="text/javascript">
var session_img = '{$Session_User_Avatar}';
var cut_div;  //裁减图片外框div
var cut_img;  //裁减图片
var imgdefw;  //图片默认宽度
var imgdefh;  //图片默认高度
var offsetx = 112; //图片位置位移x
var offsety = -202; //图片位置位移y
var divx = 344; //外框宽度
var divy = 284; //外框高度
var cutx = 120;  //裁减宽度
var cuty = 120;  //裁减高度
var zoom = 0.5; //缩放比例
var zmin = 0.5; //最小比例
var zmiddle = 0.8; //最佳比例
var zmax = 1; //最大比例
	
//图片初始化
function imageInit(){
	cut_div = document.getElementById('cut_div');
	cut_img = document.getElementById('cut_img');
	imgdefw = cut_img.width;
	imgdefh = cut_img.height;
	if((imgdefh * cutx) > (imgdefw * cuty))//高稍微多一点
	{
		if(imgdefw > divx){
			zoom = divx / imgdefw;
			cut_img.width = divx;
			cut_img.height = Math.round(imgdefh * zoom);
		}
		if(imgdefw > cutx){
			zmin = cutx / imgdefw;
		}else{
			zmin = 1;
		}
		zmax =  zmin > 0.25 ? 8.0 : 4.0 / Math.sqrt(zmin);
		if(imgdefw > cutx){
			zmin = cutx / imgdefw;
		}else{
			zmin = 1;
		}
	}
	else
	{
		if(imgdefh > divy){
			zoom = divy / imgdefh;
			cut_img.width = Math.round(imgdefw * zoom);
			cut_img.height = divy;
		}
		if(imgdefh > cuty){
			zmin = cuty / imgdefh;
		}else{
			zmin = 1;
		}
		zmax =  zmin > 0.25 ? 8.0 : 4.0 / Math.sqrt(zmin);
		if(imgdefh > cuty){
			zmin = cuty / imgdefh;
		}else{
			zmin = 1;
		}
	}
	cut_img.style.left = Math.round((divx - cut_img.width) / 2);
	cut_img.style.top = Math.round((divy - cut_img.height) / 2) - divy;
	Drag.init(cut_div, cut_img);
	cut_img.onDrag = when_Drag;
	zmiddle = zoom;
}

//图片逐步缩放
function imageResize(act){
	if(act=="+")
		zoom = zoom * 1.1;
	else if(act=="-")
		zoom = zoom / 1.1;
	else if(act=="m")
		zoom = zmiddle;
	else
		zoom = 1.0;
	if(zoom < zmin) zoom = zmin;
	//if(zoom > zmax) zoom = zmax;
	if(zoom > 1) zoom = 1;
	cut_img.width = Math.round(imgdefw * zoom);
	cut_img.height = Math.round(imgdefh * zoom);
	checkcutpos();
}

//获得style里面定位
function getStylepos(e){  
	return {x:parseInt(e.style.left), y:parseInt(e.style.top)}; 
}

//获得绝对定位
function getPosition(e){  
	var t=e.offsetTop;  
	var l=e.offsetLeft;  
	while(e=e.offsetParent){  
		t+=e.offsetTop;  
		l+=e.offsetLeft;  
	}
	return {x:l, y:t}; 
}

//检查图片位置
function checkcutpos(){
	var imgpos = getStylepos(cut_img);
	max_x = Math.max(offsetx, offsetx + cutx - cut_img.clientWidth);
	min_x = Math.min(offsetx + cutx - cut_img.clientWidth, offsetx);
	if(imgpos.x > max_x)
		cut_img.style.left = max_x + 'px';
	else if(imgpos.x < min_x)
		cut_img.style.left = min_x + 'px';
	max_y = Math.max(offsety, offsety + cuty - cut_img.clientHeight);
	min_y = Math.min(offsety + cuty - cut_img.clientHeight, offsety);
	if(imgpos.y > max_y)
		cut_img.style.top = max_y + 'px';
	else if(imgpos.y < min_y)
		cut_img.style.top = min_y + 'px';
	$("#info_cut").html("x:"+cut_img.style.left+", y:"+cut_img.style.top+", w:"+Math.round(120 / zoom)+"px, h:"+Math.round(120 / zoom)+"px");
}

//图片拖动时触发
function when_Drag(clientX , clientY){
	checkcutpos();
}

//获得图片裁减位置
function getcutpos(){
	var imgpos = getStylepos(cut_img);
	var x = offsetx - imgpos.x;
	var y = offsety - imgpos.y;
	var cut_pos = document.getElementById('cut_pos');
	//cut_pos.value = '120,120,'+Math.round(x / zoom) + ',' + Math.round(y / zoom) + ',' + Math.round(cut_img.width / zoom) + ',' + Math.round(cut_img.height / zoom);
	cut_pos.value = '120,120,'+Math.round(x / zoom) + ',' + Math.round(y / zoom) + ',' + Math.round(120 / zoom) + ',' + Math.round(120 / zoom);
	ajaxChangeAvatar(cut_pos.value);
	return false;
}

//页面载入初始化
function avatar_Init(){
	imageInit();
}

if (document.all){
	window.attachEvent('onload',avatar_Init);
}else{
	window.addEventListener('load',avatar_Init,false);
} 
</script>
</body>
</html>
